<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>

<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
export default {
  name: "Vue2MapboxFirstmapboxMap",
  data() {
    return {};
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
      const map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z",
        center: [118.79013542048335, 32.05775855185749],
        zoom: 4, 
        projection: "mercator", // webgl图层需设置为墨卡托投影
      });

      // 为地图加载完成时添加事件监听函数
      map.on("load", function () {
        // 创建一个自定义图层
        map.addLayer({
          id: "custom-layer",
          type: "custom",
          renderingMode: "3d",
          // onAdd: function (map, gl) {
          //     // 在图层添加到地图时执行一次初始化操作

          //     // 创建顶点着色器
          //     const vertexSource = `
          //         attribute vec2 position;
          //         void main() {
          //         gl_Position = vec4(position, 0.0, 1.0);
          //         gl_PointSize = 100.0; // 定义点的大小
          //         }
          //     `;

          //     // 创建片段着色器
          //     const fragmentSource = `
          //         void main() {
          //         gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置点的颜色为红色
          //         }
          //     `;

          //     // 创建并编译顶点着色器
          //     const vertexShader = gl.createShader(gl.VERTEX_SHADER);
          //     gl.shaderSource(vertexShader, vertexSource);
          //     gl.compileShader(vertexShader);

          //     // 创建并编译片段着色器
          //     const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
          //     gl.shaderSource(fragmentShader, fragmentSource);
          //     gl.compileShader(fragmentShader);

          //     // 创建 WebGL 程序并链接顶点着色器和片段着色器
          //     const program = gl.createProgram();
          //     gl.attachShader(program, vertexShader);
          //     gl.attachShader(program, fragmentShader);
          //     gl.linkProgram(program);
          //     gl.useProgram(program);

          //     // // 定义顶点数据
          //     const positions = new Float32Array([0.0, 0.0]);

          //     // 创建顶点缓冲区对象并绑定数据
          //     const buffer = gl.createBuffer();
          //     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
          //     gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
          //     // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([118.790, 32.0577]), gl.STATIC_DRAW);

          //     // 获取位置属性位置
          //     const positionAttributeLocation = gl.getAttribLocation(program, 'position');

          //     // 启用并设置位置属性
          //     gl.enableVertexAttribArray(positionAttributeLocation);
          //     gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

          //     // 清空画布，并绘制点位
          //     gl.clearColor(0.0, 0.0, 0.0, 0.0);
          //     gl.clear(gl.COLOR_BUFFER_BIT);
          //     gl.drawArrays(gl.POINTS, 0, 1);

          // },
          // render: function (gl, matrix) {
          //     // 渲染方法为空，因为我们只需要在添加图层时绘制一次点位，不需要每一帧都重新渲染
          // }

          onAdd: function (map, gl) {
            // create GLSL source for vertex shader
            const vertexSource = `
            uniform mat4 u_matrix;
            attribute vec2 a_pos;
            void main() {
                gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
            }`;

            // create GLSL source for fragment shader
            const fragmentSource = `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);
            }`;

            // create a vertex shader
            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, vertexSource);
            gl.compileShader(vertexShader);

            // create a fragment shader
            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, fragmentSource);
            gl.compileShader(fragmentShader);

            // link the two shaders into a WebGL program
            this.program = gl.createProgram();
            gl.attachShader(this.program, vertexShader);
            gl.attachShader(this.program, fragmentShader);
            gl.linkProgram(this.program);

            this.aPos = gl.getAttribLocation(this.program, "a_pos");

            // define vertices of the triangle to be rendered in the custom style layer
            const helsinki = mapboxgl.MercatorCoordinate.fromLngLat({
              lng: 125.004,
              lat: 35.239,
            });
            const berlin = mapboxgl.MercatorCoordinate.fromLngLat({
              lng: 120.403,
              lat: 22.562,
            });
            const kyiv = mapboxgl.MercatorCoordinate.fromLngLat({
              lng: 100.498,
              lat: 30.541,
            });

            // create and initialize a WebGLBuffer to store vertex and color data
            this.buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
            gl.bufferData(
              gl.ARRAY_BUFFER,
              new Float32Array([
                helsinki.x,
                helsinki.y,
                berlin.x,
                berlin.y,
                kyiv.x,
                kyiv.y,
              ]),
              gl.STATIC_DRAW
            );
          },

          // method fired on each animation frame
          // https://docs.mapbox.com/mapbox-gl-js/api/#map.event:render
          render: function (gl, matrix) {
            gl.useProgram(this.program);
            gl.uniformMatrix4fv(
              gl.getUniformLocation(this.program, "u_matrix"),
              false,
              matrix
            );
            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
            gl.enableVertexAttribArray(this.aPos);
            gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);
            gl.enable(gl.BLEND);
            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
          },

        });
      });
    },
  },
};
</script>

<style ></style>
